<template>
  <div>
    <transition name='animation'>
      <el-card class="box-card" v-show="flag">
        <div slot="header" class="clearfix">
          <h3>人员管理</h3>
        </div>
        <el-button type="primary">导出</el-button>
        <template>
          <el-table
            :data="tableData"
            style="width: 100%"
            stripe
            :header-cell-style="{
              background: '#f5f7f9',
              borderTop: '1px solid #ebeef5',
              textAlign: 'center',
            }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              align="center"
              type="index"
              width="120"
              label="序号"
              fixed
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              width="120"
              label="姓名"
              fixed="left"
            >
            <template slot-scope="scope">
              <el-button type="text" @click="go(scope.row._id)">{{scope.row.name}}</el-button>
            </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="organ"
              width="120"
              label="部门"
            >
              <template slot-scope="scope">
                {{ scope.row.stationId.name }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="station"
              width="120"
              label="岗位"
            >
              <template slot-scope="scope">
                {{ scope.row.organId.name }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="phone"
              width="120"
              label="手机号"
            >
            </el-table-column>
            <el-table-column align="center" prop="_id" width="220" label="工号">
            </el-table-column>
            <el-table-column
              align="center"
              prop="sid"
              width="220"
              label="证件号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="nature"
              width="120"
              label="工作性质"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="state"
              width="120"
              label="状态"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="entry"
              width='200'
              label="入职日期"
            >
              <template slot-scope="scope">
                {{ scope.row.entry | Day }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template >

                <el-button
                  type="text"
                  size="small"
                  style="color: red"
                  @click="Error()"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  name: "VueSalarysysStaff",

  data() {
    return {
      tableData: [],
      flag:false
    };
  },

  mounted() {
    
    setTimeout(()=>{
      this.flag = true,
      this.getData();
    },100)
  },

  methods: {
    // handleClick(obj) {
    //   console.log(obj);
    // },
    async getData() {
      let { data } = await this.$axios.get("/organ/getStaff");
      // console.log(data,'122122122');
      this.tableData = data.data;
    },

    Error() {
      this.$notify.error({
        title: "错误",
        message: "该员工已有考勤、社保、薪资数据，不能删除！",
      });
    },
    go(id){
      this.$router.push({ path: "/home/record", query: { id } })
    }
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

// 动画
.animation-enter,
animation-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.animation-enter-active {
  transition: all 0.5s ease-in-out;
}

.animation-enter-to,
animation-leave {
  transform: translateX(0);
  opacity: 1;
}
</style>